

// import React from "react"
// const ThemeContext = React.createContext();

// // Provider是提供数据，祖先提供数据
// // Consumer是消费数据，后代消费数据
// const { Provider, Consumer } = ThemeContext

// // class Child extends React.Component {

// //   render() {
// //     console.log(this);
// //     return (
// //       <div>
// //         <h3>子组件: {this.context}</h3>
// //       </div>
// //     )
// //   }
// // }

// // Child.contextType = ThemeContext


// class Child extends React.Component {
//   render() {
//     return (
//       <Consumer>
//         {
//           (ctx) => {
//             console.log(ctx);
//             return (
//               <div>
//                 <h3>子组件: {ctx}</h3>
//               </div>
//             )
//           }
//         }
//       </Consumer>
//     )
//   }
// }

// function Parent(props) {
//   return (
//     <div>
//       <h3>父组件</h3>
//       <Child></Child>
//     </div>
//   )
// }

// function PageA() {
//   return (
//     <Provider value={"110"}>
//       <div>
//         <h2>页面</h2>
//         <Parent></Parent>
//       </div>
//     </Provider>
//   )
// }

// export default PageA;

// --------------------------------------


import React, { useState } from "react"
const ThemeContext = React.createContext();
const { Provider, Consumer } = ThemeContext


class Child extends React.Component {
  render() {
    return (
      <Consumer>
        {
          (ctx) => {
            console.log(ctx);
            return (
              <div style={ctx}>
                <h3>我是后代元素</h3>
              </div>
            )
          }
        }
      </Consumer>
    )
  }
}

function Parent(props) {
  return (
    <div>
      <h3>父组件</h3>
      <Child></Child>
    </div>
  )
}

function ThemeToggle({ theme, onChange }) {
  let change = (e) => {
    let key = e.target.name
    let val = e.target.value;
    onChange({ ...theme, [key]: val })
  }
  return (
    <>
      <div>
        前景色：<input type="color" value={theme.color} name="color" onChange={change} />
        背景色：<input type="color" value={theme.background} name="background" onChange={change} />
      </div>
    </>
  )
}

function PageA() {
  const [theme, setTheme] = useState({ color: "#000000", background: "#ffffff" })

  return (
    <Provider value={theme}>
      <div>
        <div>
          <h2>页面</h2>
          <Parent></Parent>
        </div>
        <ThemeToggle theme={theme} onChange={e => setTheme(e)}></ThemeToggle>
      </div>
    </Provider>
  )
}

export default PageA;

